import React from 'react';
import * as conf from '../admin/config';
import {Spin} from 'antd';
import publicIp from 'public-ip';
import moment from 'moment';

let number = '';
function animated(){
  let animated = $('.animated');
  setTimeout(function(){
    animated.each(function(){
      $(this).show();
      let animatedTop = $(this).position().top+$(this).height(); //元素距离顶部距离
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;  //滚动条滚动的高度
      let top = scrollTop + height; //可视区域距离顶部高度
      if(animatedTop >= scrollTop && animatedTop-$(this).height() <= top){  //判断范围，一个区间
        let add = $(this).attr('data-animation');
        //alert(add)
        $(this).addClass(add).fadeIn();
      }else{
        let remove = $(this).attr('data-animation');
        if($(this).attr('id') != 'noFadeOut'){
          $(this).removeClass(remove).fadeOut();
        }
      }
    });
  },500);
}

class App extends React.Component {

  constructor(props){
    super(props);
    this.state={
      data:[],
      table:'m1',
      qrCode:'',
      overflow:'hidden',
    }
  }
  componentDidMount(){
    this.find();
    this.findActive();
    this.findBase();
    this.getSource();
  };

  //检查来源
  getSource=()=>{
    publicIp.v4().then(ip => {
      conf.request(conf.action.find,{
        table:'m1d',
        where:{ip:ip,date:moment(new Date()).format('YYYY-MM-DD')}
      }).then((result) => {
        if($.isEmptyObject(result.data.source) || result.data.source != 'wechat'){
          window.addEventListener('scroll', this.orderScroll);
        }
      });
    });
  };

  //滚动条下拉
  orderScroll=()=>{
    $('#qrCode').show();
    let img = $('#content').find('.contentImg');
    let top = img.eq(number-1).offset().top;
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;  //滚动条滚动的高度
    if(scrollTop >= top){  //如果拖动到第设置数量
      $('#qrCodeMask').fadeIn();
      $("#content").css({height:document.body.clientHeight,'overflow':'hidden'}); //禁用滚动条
    }
  };


  /**
   * 查找数据
   */
  find=()=>{
    this.setState({loading:true});
    conf.request(conf.action.find,{
      table:this.state.table,
      where:{_id:this.props.params.id}
    }).then((result) => {
      // console.log(result);
      this.setState({
        data:result.data,
        loading:false
      });
      $('#content').find('img').attr('class','contentImg');
    });
  };

  /**
   * 查找活动
   */
  findActive(){
    conf.request(conf.action.findActive,{
      table:'m1'
    }).then((result)=>{
      let data = result.data.data;
      this.setState({
        qrCode:data.qrCode
      });
    })
  }
  /**
   * 查找基本设置
   */
  findBase(){
    let params = {table:'m1b',};
    conf.request(conf.action.find,params).then((result) => {
      number = result.data.number;
    });
  }

  render() {
    let data = this.state.data;
    return (
      <Spin spinning={this.state.loading} tip="Loading...">
        <div id="content" style={{textAlign:'center'}}>
          <div className="title" style={{marginBottom:10}}>{data.name}</div>
          <div className="content" dangerouslySetInnerHTML={{__html: data.content}}></div>
          <div id="qrCodeMask">
            <img src={this.state.qrCode}/>
            <div>长按识别二维码关注后继续浏览</div>
          </div>
        </div>
      </Spin>
    );
  }
}

export default App;